<template>
    <div>
        <!-- 操作区 -->
        <el-form label-position="left">
            <el-form-item style="margin: 30px;">
                <el-input placeholder="请输入员工姓名" style="width: 15%;" v-model="searchContent"></el-input>
                <el-button type="primary" style="margin-left: 10px;">搜索</el-button>
                <el-button type="success" style="margin-left: 30px;" @click="addUser = true;">新增员工</el-button>
            </el-form-item>
        </el-form>
        <el-dialog title="新增员工" :visible.sync="addUser" append-to-body width="30%"
            @close=" $refs['ruleForm'].resetFields();">
            <el-form style="width: 70% ;" :model="addForm" :rules="rules" ref="ruleForm">
                <el-form-item label="姓名" label-width="60px" prop="user_name">
                    <el-input placeholder="请输入员工姓名" v-model="addForm.user_name"></el-input>
                </el-form-item>
                <el-form-item label="密码" label-width="60px" prop="user_password">
                    <el-input placeholder="请设置一个账号密码" v-model="addForm.user_password"></el-input>
                </el-form-item>
                <el-form-item label="手机" label-width="60px" prop="phone">
                    <el-input placeholder="请输入员工手机号码" v-model="addForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="职位" label-width="60px" prop="user_level">
                    <el-select v-model="addForm.user_level" placeholder="请选择">
                        <el-option v-for="         item          in          levelList         " :key="item.value"
                            :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click=" addUser = false;">取 消</el-button>
                <el-button type="primary" @click=" addOk()">确 定</el-button>
            </div>

        </el-dialog>
        <el-table :data="tableData" border style="width: 98%;margin: 50px auto;">
            <el-table-column prop="id" label="ID">
            </el-table-column>
            <el-table-column prop="user_name" label="用户名">
            </el-table-column>
            <el-table-column prop="user_level" label="职位">
                <template slot-scope="scope">
                    <el-tag>{{ scope.row.user_level | getLevel(scope.row.user_level) }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="phone" label="联系电话">
            </el-table-column>
            <el-table-column label="员工异动" width="400">
                <template slot-scope="scope">
                    <el-button type="success">员工晋升</el-button>
                    <el-button type="warning">修改信息</el-button>
                    <el-button type="danger" @click=" delUser(scope.row.id, scope.row.user_name)">删除员工</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination layout="prev, pager, next" :total="50">
        </el-pagination>
    </div>
</template>

<script>
import httpApi from '@/service';

export default {
    data() {
        return {
            page: 1,
            pageSize: 8,
            disable: '',
            searchContent: '',
            addUser: false,
            // 员工列表
            tableData: [{
                id: '',
                user_name: '',
                user_level: '',
                phone: '',
            }],
            // 职位列表
            levelList: [
                {
                    value: 1,
                    label: '餐厅经理',
                },
                {
                    value: 2,
                    label: '餐厅副经理',
                },
                {
                    value: 3,
                    label: '储备经理',
                },
                {
                    value: 4,
                    label: '普通员工',
                }
            ],
            // 新增员工的表单
            addForm: {
                user_name: '',
                user_password: '',
                user_level: '',
                phone: '',
            },
            // 表单验证
            rules: {
                user_name: [
                    { required: true, message: '请输入员工姓名', trigger: 'blur' }
                ],
                user_password: [
                    { required: true, message: '请设置一个账号密码' },
                    { max: 8, min: 8, message: '请输入8位的密码', trigger: 'blur' }
                ],
                user_level: [
                    { required: true, message: '请选择职位', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' },
                    {
                        validator: function (rule, value, callback) {
                            if (/^1[34578]\d{9}$/.test(value) == false) {
                                callback(new Error("请输入正确的手机号"));
                            } else {
                                callback();
                            }
                        }, trigger: 'blur'
                    },
                ],
            }
        }

    },
    methods: {
        // 员工列表
        userList() {

            httpApi.userApi.userList({ page: this.page, pageSize: this.pageSize }).then(res => {
                this.tableData = res.data.data
            })
        },
        // 新增员工(确认)
        addOk() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    httpApi.userApi.userReg(this.addForm).then(res => {
                        if (res.data.code == 200) {
                            this.$message.success(res.data.msg);
                            this.userList()
                            this.addUser = false
                        } else {
                            this.$message.error(res.data.msg);
                        }

                    })
                } else {
                    return false;
                }
            });
        },
        // 删除员工
        delUser(id, name) {
            let token = localStorage.getItem('token').split(".");
            let user = JSON.parse(decodeURIComponent(escape(window.atob(token[1]))))
            // 权限设置只有餐厅经理能操作员工
            if (user.user_level == 1) {
                this.$confirm(`确认将<span style="color:#F56C6C;margin:0 5px">${name}</span>永久移除么?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    dangerouslyUseHTMLString: true,
                    type: 'warning'
                }).then(() => {
                    this.$loading({
                        lock: true,
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    })
                    httpApi.userApi.delUser({ id }).then(res => {
                        this.$loading().close()
                        if (res.data.code == 200) {
                            this.$message.success(res.data.msg);
                            this.userList()
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    });
                }).catch(() => {
                    return
                })
            } else {
                this.$message.error('权限不足,请联系餐厅经理');
                return
            }
        }
    },
    mounted() {
        this.userList()
    },
}
</script>

<style lang="scss" scoped></style>